<template>
  <div class="app-container">
    <el-dialog
      v-model="memberDialogVisible"
      @open="onOpen"
      @close="onClose"
      title="人员选择"
    >
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="68px"
        @submit.prevent
      >
        <el-form-item label="" prop="keyWord">
          <el-input
            v-model="queryParams.nickName"
            placeholder="姓名"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="memberList"
        @select="handleSelect"
        ref="tableRef"
        :row-key="getRowKey"
        @select-all="handleSelectAll"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          reserve-selection
        />
        <el-table-column
          label="序号"
          align="center"
          prop="noticeId"
          width="100"
        >
          <template #default="scope">
            <span>{{
              scope.$index +
              1 +
              (queryParams.pageNum - 1) * queryParams.pageSize
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          prop="nickName"
          :show-overflow-tooltip="true"
          width="300"
        />
        <el-table-column label="机构" align="center" prop="unit" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { listUser } from "@/api/system/user";
import { allocatedUserList } from "@/api/system/role";
import { getTeacherList ,getStudentList} from "@/api/pms/project";
const memberList = ref([]);
const total = ref(0);
const checkedList = ref([]);
const checkedListBF = ref([]);
const props = defineProps({
  checkedList: { type: Array, default: [] },
  type: { type: String, default: "user" },
  projectId: {
    type: String,
    default: "",
  },
});

const tableRef = ref();
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  username: undefined,
  nickName:undefined,
  phonenumber: undefined,
  status: undefined,
  deptId: undefined,
  id: props.projectId ? props.projectId : undefined,
  roleId:props.type == 'role'?'101':undefined,
});
const listApi = {
  user: listUser,
  teacher: getTeacherList,
  student:getStudentList,
  role:allocatedUserList
};

// 弹窗设置
const memberDialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/** 多选框选中数据 */
// function handleSelectionChange(selection) {
//   checkedList.value = selection;
// }
function handleSelect(selection, row) {
  let no = -1;
  checkedListBF.value.find((item, index) => {
    if (item.id.toString() == row.userId.toString()) {
      no = index;
    }
  });
  if (no > -1) {
    checkedListBF.value.splice(no, 1);
  } else {
    checkedListBF.value.push({
      id: row.userId,
      username: row.nickName,
    });
  }
}
function handleSelectAll(rows) {
  if (rows.length > 0) {
    rows.forEach((row) => {
      let no = -1;
      checkedListBF.value.find((item, index) => {
        if (item.id.toString() == row.userId.toString()) {
          no = index;
        }
      });
      if (no > -1) {
      } else {
        checkedListBF.value.push({
          id: row.userId,
          username: row.nickName,
        });
      }
    });
  } else {
    memberList.value.forEach((row) => {
      let no = -1;
      checkedListBF.value.find((item, index) => {
        if (item.id.toString() == row.userId.toString()) {
          no = index;
        }
      });
      if (no > -1) {
        checkedListBF.value.splice(no, 1);
      } else {
      }
    });
  }
}
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
async function onOpen() {
  checkedListBF.value = JSON.parse(JSON.stringify(props.checkedList));
  await getList();
}
async function getList() {
  await listApi[props.type](queryParams.value).then((res) => {
    memberList.value = res.rows;
    total.value = res.total;
    if (checkedListBF.value) {
      // 循环需要选中的数组
      checkedListBF.value.forEach((item) => {
        // 在数据源中判断是否存在
        const row = memberList.value.find(
          (r) => String(r.userId) === String(item.id)
        );
        if (row) {
          tableRef.value.toggleRowSelection(row, true);
        }
      });
    }
  });
}
/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {
  checkedListBF.value = [];
  tableRef.value.clearSelection();
  queryParams.value.pageNum = 1;
  queryParams.value.nickName = ''
}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  memberDialogVisible.value = false;
}
function handelConfirm() {
  emit("confirm", checkedListBF.value);
  close();
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.deptId = undefined;
  proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery();
}

function getRowKey(row) {
  return row.userId;
}
</script>
